<template>
  <div class="draw-wrap">
    <div class="zoom-wrap">
      <i class="el-icon-remove" @click="zoomChange('sub')"></i>
      <i class="el-icon-circle-plus" @click="zoomChange('add')"></i>
    </div>
    <div id="previewCanvas" class="cavs"></div>
  </div>
</template>

<script>
import { Graph } from "@antv/x6";
import { showSubstationFile } from "@/request/api.js";
import { Scroller } from "@antv/x6-plugin-scroller";
export default {
  name: "electDrawList",
  props: {
    model: {
      type: Object,
      default: () => {
        return {
          // statroomname: "真武庙开闭站",
          // statroomnumber: "CQZ136(Z)",
          // verifyjson: "",
        };
      },
    },
  },
  data() {
    return {
      graph: null,
    };
  },
  mounted() {
    this.initGraph();
    this.showSubstationFile();
    // if (this.$route.query) {
    //   this.model.statroomname = this.$route.query.statroomname;
    //   this.model.statroomnumber = this.$route.query.statroomnumber;
    // }
  },
  methods: {
    zoomChange(mark) {
      if (this.graph) {
        let zoom = this.graph.zoom();
        let newZoom = 0;
        let gap = 0.25;
        if (mark == "sub") {
          newZoom = zoom - gap;
        } else {
          newZoom = zoom + gap;
        }
        this.graph.zoomTo(newZoom);
      }
    },
    initGraph() {
      this.graph = new Graph({
        container: document.getElementById("previewCanvas"),
        width: "100%",
        height: "100%",
        selecting: false, // 点选/框选，默认禁用。
        // snapline: true,
        mousewheel: true, //缩放
        panning: {
          //画布是否可以拖拽平移
          enabled: false,
          eventTypes: ["leftMouseDown"],
        },
        interacting: {
          nodeMovable: false,
        },
        grid: {
          visible: false,
        },
      });
      this.graph.use(
        new Scroller({
          enabled: true,
          pannable: true,
        })
      );
    },
    // 查看图版信息
    async showSubstationFile() {
      let res = await showSubstationFile({
        statroomnumber: this.model.statroomnumber,
      });
      if (res.code == 200 && res.result.verifyjson) {
        this.model.verifyjson = res.result.verifyjson;
        this.graph.fromJSON(JSON.parse(this.model.verifyjson));
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.draw-wrap {
  position: relative;
  width: 100%;
  height: 100%;

  .zoom-wrap {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    z-index: 9999999999999;
    i {
      font-size: 28px;
      color: rgba(0, 0, 0, 0.8);
    }
  }
}
.cavs {
  display: block;
  left: 0 !important;
  top: 0 !important;
}
</style>
<style>
.x6-graph-scroller-content {
  width: 100% !important;
  height: 100% !important;
}
</style>
